<template>
  <template v-if="inited">
<!--    {{state.OPT.widgetConfig}}-->
    <z-upload :file-size="state.OPT.widgetConfig.fileSize * 1024"
              :binds="state.OPT.widgetConfig"></z-upload>
  </template>

</template>

<script>
import {CustomRenderControlMixin, defineCustomRender} from "@/plugins/form-render/utils/index.js";
import {createAbleProp, createBaseCusCONFIG} from "@/plugins/z-frame/CusBaseEditor";
import {QuickNumber, QuickString, QuickTextarea} from "@/hooks/props";
import ZUpload from "@/plugins/z-frame/components/ZUpload.vue";


export default {
  name: 'CusUploader',
  components: {ZUpload},
  mixins: [
      CustomRenderControlMixin
  ],
  CUS_TITLE: '上传',
  CUS_EDITOR: function () {
    return {
      props: {
        ...createBaseCusCONFIG(),
        ['buttonTxt']: QuickString('按钮内容'),
        ['tip']: QuickTextarea('提示'),
        multiple: createAbleProp({
          label: '多选'
        }),
        ['showFileList']: createAbleProp({
          label: '文件列表'
        }),
        ['autoUpload']: createAbleProp({
          label: '自动上传'
        }),
        ['limit']: {
          ...QuickNumber(),
          ui: {
            label: '最大允许上传个数'
          }
        },
        ['fileSize']: {
          ...QuickNumber(),
          ui: {
            label: '最大文件大小(单位为M)'
          }
        },
        action: {
          type: 'string',
          ui: {
            label: '上传地址'
          }
        },
        accept: {
          type: 'string',
          ui: {
            label: '接受上传的类型',
            widget: 'CusSelect',
            widgetConfig: {
              filterable: true,
              ['allow-create']: true,
              ['default-first-option']: true,
              multiple: true,
              options2: ZY.JSON5.stringify(
                  [
                    {
                      label: 'jpp',
                      value: 'jpp'
                    },
                    {
                      label: 'png',
                      value: 'png'
                    },
                    {
                      label: 'gif',
                      value: 'gif'
                    },
                    {
                      label: 'svg',
                      value: 'svg'
                    },
                    {
                      label: 'webp',
                      value: 'webp'
                    },
                    {
                      label: 'apng',
                      value: 'apng'
                    },
                    {
                      label: 'exif',
                      value: 'exif'
                    },
                  ]
              )
            }
          },
          rules: {
            type: 'any'
          }
        },
      }
    }
  },
  setup(props, ctx) {
    let { data, methods, listeners, init, widgetConfig2 } = defineCustomRender(props, ctx)
    let state = data()
    init(props)

    return {
      state,
      widgetConfig: widgetConfig2,
      methods,
      listeners,
    }
  },
}
</script>

